<template>
  <div id="chart">
    <el-card shadow="always">
      <div id="pie">
        <div id="pieExpression" class="pie"></div>
        <div id="pieAttitude" class="pie"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  methods: {
    getPieExpression() {
      const pieExpression = echarts.init(
        document.getElementById('pieExpression')
      )
      /** @type EChartsOption */
      const optionExpressionPie = {
        title: {
          text: '表情识别结果',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          },
          left: 'center',
          subtext: 'Fake Data'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { orient: 'vertical', left: 'left' },
        toolbox: {
          feature: {
            saveAsImage: {}

            // dataZoom: {}
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      pieExpression.setOption(optionExpressionPie)
    },
    getPieAttitude() {
      const pieAttitude = echarts.init(document.getElementById('pieAttitude'))
      /** @type EChartsOption */
      const optionAttitudePie = {
        title: {
          text: '姿态识别结果',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          },
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { orient: 'vertical', left: 'left' },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      pieAttitude.setOption(optionAttitudePie)
    }
  },
  mounted() {
    this.getPieExpression()
    this.getPieAttitude()
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
  #pie {
    display: flex;
    justify-content: space-around;
    .pie {
      height: 600px;
      width: 600px;
    }
  }
}
</style>
